<script lang="ts" setup>
import { ref, computed } from 'vue'
import { queryRefundApply } from '@/api/expense'
import {
  queryRefundApplyResponseData,
  AlipayAccountData,
  BankCardAccountData
} from '@/api/expense/types/expense'
import { getToken } from '@/utils/cache/cookies'
import dayjs from 'dayjs'
import { BizType, RefundStatus, RefundApplyType, AccountType } from '@/types/enum'
const dialogVisible = ref<boolean>(false)
const orderId = ref<string>('')
const previousOrderId = ref<string | null>(null)
const open = () => {
  if (orderId.value !== previousOrderId.value) {
    previousOrderId.value = orderId.value
    getData()
  }
  dialogVisible.value = true
}
const setId = (newId: string) => {
  orderId.value = newId
}
defineExpose({ open, setId })
const data = ref<queryRefundApplyResponseData[]>([])
const getData = async () => {
  try {
    const res = await queryRefundApply({
      token: getToken() ?? '',
      orderId: orderId.value
    })
    if (res.statusCode === '0') {
      data.value = res.data
    }
  } catch (error) {
    console.error(error)
  }
}
const changeOrderType = computed(() => {
  const orderTypeMap: Record<string, any> = {
    ChangeBattery: '换电套餐-不含电',
    BatteryTimesCard: '电池次卡-不含电',
    BatteryOverdue: '电池逾期',
    BatteryActivity: '电池套餐-含电',
    BatteryOverdueRerent: '电池逾期续租-组合支付',
    BatteryDeposit: '电池押金退款',
    BatteryRerent: '电池续租',
    BikeLongTerm: '车辆长租',
    BikeOverdue: '租车逾期',
    BikeRerent: '租车续租',
    BikeOverdueRerent: '租车逾期续租',
    BikeDeposit: '租车押金退款',
    OnlineBike: '车辆售卖'
  }
  return (orderType: BizType) => {
    return orderTypeMap[orderType] || '其他'
  }
})
// 订单状态描述
const changeStatus = computed(() => {
  const statusMap: Record<string, any> = {
    '0': '审核中',
    '1': '退款中',
    '2': '已驳回',
    '3': '已退款',
    '4': '撤回申请'
  }
  return (status: RefundStatus) => {
    return statusMap[status] || '未知状态'
  }
})
// 订单状态颜色样式
const statusStyle = computed(() => {
  return (status: RefundStatus) => {
    let color = '#FF6D75' // Default color
    if (status === '0' || status === '1') {
      color = 'var(--xy-warning-light-color)'
    } else if (status === '3') {
      color = '#00A870'
    }
    return { color }
  }
})
const changeApplyType = computed(() => {
  return (val: RefundApplyType) => {
    if (val === 'PARTIAL_REFUND') {
      return '部分退款'
    } else {
      return '押金退款'
    }
  }
})
const changeAccountType = computed(() => {
  return (val: AccountType) => {
    if (val === 'Origin') {
      return '原路退回'
    } else if (val === 'Alipay') {
      return '支付宝'
    } else if (val === 'BankCard') {
      return '银行卡'
    }
  }
})
const isAlipayAccount = (data: any): data is AlipayAccountData => {
  return data && typeof data.aliName === 'string' && typeof data.aliAccount === 'string'
}

const isBankCardAccount = (data: any): data is BankCardAccountData => {
  return (
    data &&
    typeof data.bankName === 'string' &&
    typeof data.bankBranchName === 'string' &&
    typeof data.username === 'string' &&
    typeof data.card === 'string'
  )
}
</script>

<template>
  <el-dialog
    class="refund-record-dialog"
    title="退款记录"
    width="650px"
    v-model="dialogVisible"
    :append-to-body="true"
  >
    <div class="refund-record-list" v-for="(record, index) in data" :key="index">
      <div class="refund-record-item" flex flex-col>
        <div class="refund-record-item__title" flex flex-col>
          <div class="title-1" flex justify-between items-center>
            <span
              >退款订单号:&nbsp;<span>{{ record.orderId }}</span></span
            >
            <span :style="statusStyle(record.status)">{{ changeStatus(record.status) }}</span>
          </div>
          <div class="title-2" flex items-center>
            <div>申请时间:{{ dayjs(record.createdTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
            <div style="margin-left: 20px">提交人:{{ record.submitter }}</div>
          </div>
        </div>
        <div class="refund-record-item__body" flex flex-col>
          <div>
            <span>用户手机号:</span>
            <span>{{ record.mobilePhone }}</span>
          </div>
          <div>
            <span>退款类型:</span>
            <span>{{ changeOrderType(record.orderType) }}</span>
          </div>
          <div>
            <span>操作类型:</span>
            <span>{{ changeApplyType(record.applyType) }}</span>
          </div>
          <div>
            <span>退款金额:</span>
            <span>{{ record.applyAmount }}</span>
          </div>
          <div>
            <span>退款原因:</span>
            <span>{{ record.applyReason }}</span>
          </div>
          <div>
            <span>退款渠道:</span>
            <span>{{ changeAccountType(record.accountType) }}</span>
          </div>
          <div v-if="isAlipayAccount(record.accountData)">
            <span>账号信息:</span>
            <span>{{ record.accountData.aliName }}&nbsp;{{ record.accountData.aliAccount }}</span>
          </div>
          <div v-else-if="isBankCardAccount(record.accountData)">
            <span>账号信息:</span>
            <span
              >{{ record.accountData.bankName }}&nbsp;{{
                record.accountData.bankBranchName
              }}&nbsp;{{ record.accountData.username }}&nbsp;{{ record.accountData.card }}</span
            >
          </div>
          <div v-else>
            <span>账号信息: {{ record.accountData }}</span>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<style scoped></style>
